<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!-- Body -->
<div class="panel panel-default" >
    <div class="panel-heading" >
        Voeg een nieuwe accommodatie toe:
    </div>
    <div class="container-fluid">
        <form:form class="form-horizontal" id="accommodationForm" action="${pageContext.request.contextPath}/accommodation/create" method="post" modelAttribute="accommodationViewmodel">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label">Accommodatie</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='title' placeholder="Accommodatie naam"/>                          
                    </div>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='accommodationType.type' placeholder="Accommodatie type"/>                          
                    </div>
                </div>                   
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label">Adres</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='Street' placeholder="Straatnaam"/>
                    </div>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='housenumber' placeholder="Huisnummer"/>
                    </div>
                    <div class="col-md-2">
                        <form:input class="form-control" type='text' path='postalCode' placeholder='Postcode' />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label"></label>
                    <div class="col-md-3">
                        <form:select class="form-control" type='text' path='country.id' onChange="javascript:getCities(this.value);">
                            <form:option value="">Selecteer</form:option>
                            <c:forEach var="country" items="${countries}">
                                <form:option value="${country.id}">${country.name}</form:option>
                            </c:forEach>
                        </form:select>
                    </div>
                    <div class="col-md-3">
                        <form:select class="form-control" type='text' path='city.id' id="cityname">
                            <form:option value="">Selecteer</form:option>
                        </form:select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label">Beschrijving NL</label>
                    <div class="col-md-8">
                        <form:textarea class="form-control" rows="5" path='description_nl' placeholder='Voer een beschrijving in' />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label">Beschrijving EN</label>
                    <div class="col-md-8">
                        <form:textarea class="form-control" rows="5" path='description_en' placeholder='Voer een beschrijving in' />
                    </div>
                </div>
            </div>
            <div class="col-md-2"></div>
            <input class="btn" id="submit" name="submit" type="submit" value="Opslaan"/>
        </form:form>
    </div>
</div>

<script>
    function getCities(value) {
        // Get the selectbox in which the regions need to go.
        var selCities = document.getElementById('cityname');
        var lenCities = selCities.length;

        if (value >= 1) {
            // Clear the existing regions in case of swith between country.
            for (var i = lenCities; i; i--) {
                parCities = selCities.options[i - 1].parentNode;
                parCities.removeChild(selCities.options[i - 1]);
            }

            $.ajax({
                url: window.location.origin + "/reisorg-empl-site/city/getbycountryid/" + value,
                type: "GET",
                dataType: 'json',
                contentType: 'application/jsons',
                success: function (region, textStatus, jqXHR)
                {
//                    debugger;
                    var newOption = document.createElement("option");
                    newOption.text = "Selecteer";
                    newOption.value = "";
                    selCities.options.add(newOption);

                    for (i = 0; i < region.length; i++) {
                        var newOption = document.createElement("option");
                        newOption.text = region[i].name;
                        newOption.value = region[i].id;
                        selCities.options.add(newOption);
                    }
                    //Set the URL of the href
                    document.getElementById("cityLink").href = "city/" + value;
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
//                    debugger
                    alert("Mislukt om een connectie met de server te maken");
                }
            });
        } else {
//            debugger;
            selectedDivCities.style.display = 'none';
        }
    }

</script>
